<template>
  <div class="app-container">

    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="请输入角色名称">
        <el-input v-model="form.roleName" placeholder="角色" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="primary" @click="upd">修改</el-button>
        <el-button type="primary" @click="dels">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="roleId"
        label="id"
        width="180"
      />
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="180"
      />
      <el-table-column
        prop="remark"
        label="备注"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
      />
      <el-table-column
        prop="deptname"
        label="部门名称"
      />

    </el-table>
    <el-pagination
      :current-page="form.pageNum"
      :page-sizes="[10,15,20,25]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="保存角色" :visible.sync="dialogFormVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
      <el-form :model="saveform">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="saveform.roleName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="saveform.remark" autocomplete="off" />
        </el-form-item>

        <el-form-item label="功能权限" :label-width="formLabelWidth">
          <el-tree
            ref="tree"
            :data="datas"
            show-checkbox

            node-key="menuId"
            highlight-current
            :props="defaultPropss"
          />
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      data: [],
      datas: [],
      total: null,
      dialogFormVisible: false,
      detail: 'add',
      formLabelWidth: '200',
      form: {
        pageNum: null,
        pageSize: null,
        roleName: '',
        remark: ''
      },
      saveform: {
        roleId: null,
        roleName: '',
        remark: '',
        deptId: null,
        parentId: null,
        mids: []
      },
      defaultProps: {
        children: 'depts',
        label: 'name'
      },
      defaultPropss: {
        children: 'sons',
        label: 'name'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-role/rolelist', { params: this.form }).then((response) => {
        console.log(response)
        this.tableData = response.data.obj.list
        this.form.pageNum = response.data.obj.pageNum
        this.form.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })

      this.axios.get('http://127.0.0.1/api/sys/wish/sys-dept/getDeptss').then((response) => {
        console.log(response)
        this.data = response.data.obj
      })

      this.axios.get('http://127.0.0.1/api/sys/wish/sys-menu/getMenus').then((response) => {
        console.log(response)
        this.datas = response.data.obj
      })
    },
    handleNodeClick(data) {
      console.log(data)
      this.saveform.deptId = data.deptId
      this.saveform.parentId = data.parentId
    },
    upd() {
      if (this.Arrays.length > 1 || this.Arrays.length < 1) {
        alert('请选择一条记录!!!')
      } else {
        this.detail = 'upd'
        this.dialogFormVisible = true
        this.axios.get('http://127.0.0.1/api/sys/wish/sys-role/getOne?id=' + this.Arrays[0]).then((response) => {
          console.log(response)
          this.saveform.roleId = response.data.roleId
          this.saveform.roleName = response.data.roleName
          this.saveform.remark = response.data.remark
          this.saveform.deptId = response.data.deptId
          this.saveform.parentId = response.data.parentId
          const mIds = new Array()
          for (const m of response.data.mlists) {
            mIds.push(m.menuId)
          }
          this.saveform.mids = mIds

          this.$refs.tree.setCheckedKeys(mIds)
        })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.form.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.form.pageNum = val
      this.init()
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleSelectionChange(rows) {
      this.Arrays = new Array()
      for (const row of rows) {
        this.Arrays.push(row.roleId)
      }
    },
    dels() {
      var ids = this.Arrays.join(',')
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-role/del?ids=' + ids).then((response) => {
        if (response.data) {
          this.init()
        } else {
          alert('批量删除失败')
        }
      })
    },
    handleDelete(row) {
      alert(row.roleId)
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-role/del?ids=' + row.roleId).then((response) => {
        if (response.data) {
          this.init()
          alert('删除成功')
          location = '@/views/sys/role'
        } else {
          alert('删除失败')
        }
      })
    },
    save() {
      let url = ''
      if (this.detail == 'add') {
        url = 'http://127.0.0.1/api/sys/wish/sys-role/roleadd'
      }
      if (this.detail == 'upd') {
        url = 'http://127.0.0.1/api/sys/wish/sys-role/roleupdate'
      }
      this.saveform.mids = this.$refs.tree.getCheckedKeys()
      this.axios.post(url, this.saveform).then((response) => {
        if (response.data) {
          alert('保存成功')
          this.dialogFormVisible = false
          this.init()
        } else {
          alert('保存失败')
        }
      })
    },
    add() {
      this.dialogFormVisible = true
      this.detail = 'add'
      this.saveform.roleId = null
      this.saveform.roleName = ''
      this.saveform.remark = ''
      this.saveform.deptId = null
      this.saveform.parentId = null
      this.saveform.mids = []
      this.$refs.tree.setCheckedKeys([])
    },
    onSubmit() {
      this.init()
    },
    test() {
      alert(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>



